<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=1">
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="/kap/css/flex.css">
	<link rel="stylesheet" type="text/css" href="/kap/css/normal.css">
	<link rel="stylesheet" type="text/css" href="chart.css">	
	<script src="/kap/js/jquery.min.js"></script>
	<script src="/kap/js/echarts.min.js"></script>
	<script src="/kap/js/ismobile.js"></script>
	<script>
		var path = "../";
		$.ajaxSetup({cache: false})
	</script>

	<style>
		.container { position: absolute; width: 96%; margin-left: 2%; background-color: #fff; height: 1000px;  }
		header { width: 100%; height: 90px; }
		.mainTitle { width: 100%; margin: 20px; font-size: 48px; color: darkorange; text-shadow: 1px 1px 3px #333; font-weight: bolder; }
		nav { width: 100%; height: 28px; line-height: 28px; background-color: #ccc; }
		nav > span { margin-left: 14px; }
		main { width: 100%; margin-top: 30px;  }
		footer { width: 100%; height: 40px; }

		@media (min-width: 1366px){
			.container { position: absolute; width: 1366px; left: 50%; margin-left: -683px; }
		}

	</style>
	
</head>
<body>
	<div class="container">
		<header>
			<div class="mainTitle">快快数据统计</div>
		</header>
		<nav><span>用户画像</span> | </nav>
		<main>
			<article class="gymSelect">
				<label class="gymName">地区或门店：</label>
				<input type="search" name="gymName" placeholder="请选择要查询的门店名称，可简短输入文字后从下拉列表中模糊匹配"  list="gymName">
				<datalist id="gymName"></datalist>
				<button id="btn_gymName">查询</button>
				
			</article>
			<article class="charts hidden">
				<div class="gymTitle"><span class="gymName"></span><span class="all_users"></span></div>
				<div class="line flex_rb">
					<section class="userSex"> 

						<aside class="chartTitle">性别</aside>
						<div class="sexIcon flex_rr"><img src="/kap/img/male.png"><img src="/kap/img/female.png"></div>
						<div class="flex_rr"><div id="male_percent">男性：%</div><div id="female_percent">女性：%</div></div>
						<div class="percent_line"><div class="first_percent"></div></div>
						<div class="percent_data flex_rr"><div id="male_count">人</div><div id="female_count">人</div></div>

					</section>
					<section class="userBMI">
						<aside class="chartTitle">BMI</aside>
						<div class="line flex_rr">
							<div class="bmi_bom"><div id="bmi1">人</div><div class="bom1"></div>	</div>
							<div class="bmi_data flex_cb"><div>偏瘦</div><div>BMI≤18.4</div><div id="bmir1">占比：%</div></div>
							<div class="bmi_bom"><div id="bmi2">人</div><div class="bom2"></div>	</div>
							<div class="bmi_data flex_cb"><div>正常</div><div>18.5≤BMI≤23.9</div><div id="bmir2">占比：%</div></div>
						</div>
						<div class="line flex_rr">
							<div class="bmi_bom"><div id="bmi3">人</div><div class="bom3"></div>	</div>
							<div class="bmi_data flex_cb"><div>偏胖</div><div>24.0≤BMI≤27.9</div><div id="bmir3">占比：%</div></div>
							<div class="bmi_bom"><div id="bmi4">人</div><div class="bom4"></div>	</div>
							<div class="bmi_data flex_cb"><div>超胖</div><div>BMI≥28.0</div><div id="bmir4">占比：%</div></div>
							
						</div>
					</section>
					<section class="userAge">
						<aside class="chartTitle">年龄</aside>
						<div class="line flex_rr">
							<div class="chart" id="userAge"></div>
							<div class="chart_data flex_rb">
								<div class="chart_data_title flex_cb">
									<div>25岁以下</div>
									<div>26~30岁</div>
									<div>31~35岁</div>
									<div>36~40岁</div>
									<div>41~45岁</div>
									<div>45岁以上</div>
								</div>
								<div class="chart_data_d flex_cb">
									<div>人</div>
									<div>人</div>
									<div>人</div>
									<div>人</div>
									<div>人</div>
									<div>人</div>
								</div>
							</div>
						</div>

						
					</section>
				</div>
				<div class="line flex_rb">
					<section class="userHeight">
						
						<div class="chart" id="userHeight"></div>
						<aside class="chartTitle">身高</aside>
					</section>
					<section class="userWeight">
						
						<div class="chart" id="userWeight"></div>
						<aside class="chartTitle">体重</aside>
					</section>	
				</div>			
			</article>
		</main>
		<footer></footer>
	</div>
</body>
</html>

<script src="/kap/chart/chartDatas.js"></script>
<script src="/kap/chart/chart.js"></script>
